import React from 'react';
import ReactDOM from 'react-dom';

class Test extends React.Component {
	/* Model数据层 */
	constructor() {
		super();
		this.state = {
			text: "珠峰培训"
		};
	}
	/* View视图层（React基于JSX创建视图层  Vue一般基于Template创建视图层，后期Vue也增加了JSX语法） */
	render() {
		return <div>
			内容：<span>{this.state.text}</span>
			<br />
			<input type="text" value={this.state.text} onChange={this.handle} />
		</div>;
	}
	handle = (ev) => {
		this.setState({
			text: ev.target.value
		});
	}
	componentDidMount() {
		/* 通过修改数据实现视图的重新渲染 */
		setTimeout(_ => {
			this.setState({
				text: '周老师很丑┭┮﹏┭┮'
			});
		}, 1000);
	}
}


ReactDOM.render(<>
	<Test></Test>
</>, document.getElementById('root'));